<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Spring and Block</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2.5;
    ctx.fillStyle = 'black';

    // Define Geometry
    const y_floor = 250;
    const x_wall = 60;
    const hash_length = 15;
    const hash_spacing = 20;

    // --- Draw Horizontal Surface (Floor) ---
    ctx.beginPath();
    ctx.moveTo(x_wall, y_floor);
    ctx.lineTo(canvas.width, y_floor);
    ctx.stroke();

    // Floor hash marks
    for (let x = x_wall + hash_spacing / 2; x < canvas.width; x += hash_spacing) {
        ctx.beginPath();
        ctx.moveTo(x, y_floor);
        ctx.lineTo(x - hash_length, y_floor + hash_length);
        ctx.stroke();
    }

    // --- Draw Vertical Wall ---
    const wall_top_y = 50;
    ctx.beginPath();
    ctx.moveTo(x_wall, y_floor);
    ctx.lineTo(x_wall, wall_top_y);
    ctx.stroke();

    // Wall hash marks
    for (let y = y_floor - hash_spacing / 2; y > wall_top_y; y -= hash_spacing) {
        ctx.beginPath();
        ctx.moveTo(x_wall, y);
        ctx.lineTo(x_wall - hash_length, y - hash_length);
        ctx.stroke();
    }

    // --- Draw Spring ---
    const spring_y_center = y_floor - 50;
    const spring_start_x = x_wall + 10;
    const num_coils = 14;
    const coil_rx = 18; // horizontal radius of ellipse
    const coil_ry = 45; // vertical radius of ellipse
    const coil_pitch = 20; // x-distance between coil centers

    // Attachment to the wall
    ctx.beginPath();
    ctx.moveTo(x_wall, spring_y_center);
    ctx.lineTo(spring_start_x, spring_y_center);
    ctx.stroke();

    // Draw the coils as overlapping ellipses
    for (let i = 0; i < num_coils; i++) {
        const cx = spring_start_x + coil_rx + i * coil_pitch;
        ctx.beginPath();
        ctx.ellipse(cx, spring_y_center, coil_rx, coil_ry, 0, 0, 2 * Math.PI);
        ctx.stroke();
    }
    // Draw the free end tip of the spring
    const last_coil_center_x = spring_start_x + coil_rx + (num_coils-1) * coil_pitch;
    ctx.beginPath();
    ctx.arc(last_coil_center_x, spring_y_center, coil_rx, -Math.PI/2, Math.PI/2);
    ctx.stroke();


    // --- Draw Block A ---
    const block_w = 100;
    const block_h = 100;
    const block_x = 440;
    const block_y = y_floor - block_h;

    ctx.beginPath();
    ctx.rect(block_x, block_y, block_w, block_h);
    ctx.stroke();

    // Label 'A'
    ctx.font = "italic 50px 'Times New Roman'";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText("A", block_x + block_w / 2, block_y + block_h / 2 + 5);

    // --- Draw Label B ---
    const label_b_x = 220;
    const label_b_y = 70;
    ctx.font = "italic 50px 'Times New Roman'";
    ctx.fillText("B", label_b_x, label_b_y);

</script>
</body>
</html>